<template>
	<view class="recharge-container">
		<view class="amount-label">充值金额</view>
		<view class="amount-options flex flex-between">
			<view 
				class="amount-option" 
				:class="{ active: selectedId === item.id }" 
				@click="selectAmount(index)" 
				v-for="(item, index) in rechargeAmount"
			>
				{{ item.name }}元
			</view>
			<!-- <view class="amount-option" :class="{ active: selectedId === 'other' }">
				<input type="text" class="amount-input" v-model="inputAmount" placeholder="其他面额" />
			</view> -->
			<view class="amount-option" style="border: none;"></view>
		</view>

		<view class="confirm-btn" @click="confirmRecharge">立即充值</view>

		<!-- 使用封装的支付组件 -->
		<payment
			v-if="createResult && createResult.id"
			:isRecharge="true"
			:show="show"
			:amount="selectedAmount"
			:orderId="createResult.payOrderId"
			:payOrderId="createResult.payOrderId"
			@close="close"
			@payment-success="handlePaymentSuccess"
			@payment-error="handlePaymentError"
		/>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				rechargeAmount: [],
				selectedId: 0, // 选中的金额id
				
				selectedAmount: "", // 金额，单位：元
				inputAmount: '',
				show: false,
				createResult: {  // 初始化为包含必要属性的对象
					id: '',
					payOrderId: ''
				},
			}
		},
		onLoad() {
			this.getWalletMoneyList();
		},
		methods: {
			// 获取充值金额
			getWalletMoneyList() {
				this.$http_api.userWallerMoneyList({}).then(res => {
					this.rechargeAmount = res;
				})
			},
			// 选择支付金额
			selectAmount(index) {
				const item = this.rechargeAmount[index];
				this.selectedAmount = Number((item.payPrice / 100).toFixed(2)); // 单位：元
				this.selectedId = item.id;
				this.inputAmount = '';
			},
			
			// 1. 创建订单
			confirmRecharge() {
				if (!this.selectedAmount || isNaN(this.selectedAmount) || this.selectedAmount <= 0) {
					return uni.$u.toast("请选择充值金额");
				}
				this.$http_api.userRechargeCreate({
					payPrice: this.selectedAmount, // 单位：元
					packageId: this.selectedId,
					validPayPriceAndPackageId: true
				}).then(res => {
					this.createResult = res;
					this.show = true;
				})
			},
			
			close() {
				this.show = false
			},
			handlePaymentSuccess(res) {
				uni.redirectTo({
					url: '/pages/user/wallet/recharge-success?money=' + this.selectedAmount
				})
			},
			handlePaymentError(error) {
				uni.$u.toast('支付失败，请重试')
			}
		},
		watch: {
			inputAmount(newVal) {
				this.selectedId = 'other';
				const amount = parseFloat(newVal);
				if (!isNaN(amount) && amount > 0) {
					// 输入金额为元，转换为分
					this.selectedAmount = Math.round(amount * 100);
				} else {
					this.selectedAmount = '0';
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.recharge-container {
		padding: 40rpx;
		background-color: #ffffff;
		min-height: 100vh;
	}

	.title {
		font-size: 36rpx;
		font-weight: bold;
		margin: 20rpx 0;
	}

	.amount-label {
		font-size: 30rpx;
		margin: 30rpx 0;
		color: #333333;
		font-weight: 600;
	}

	.amount-options {
		width: 100%;
		flex-wrap: wrap;
	}

	.amount-option {
		width: 30%;
		border-radius: 10rpx;
		text-align: center;
		font-size: 32rpx;
		color: #333;
		cursor: pointer;

		height: 151rpx;
		line-height: 151rpx;
		border-radius: 14rpx 14rpx 14rpx 14rpx;
		border: 1rpx solid #707070;
		margin-bottom: 20rpx;

		&.active {
			background-color: #E5EFFF;
			color: #1C6EFB;
			border-color: #1C6EFB;
		}

		.amount-input {
			margin-top: 55rpx;
			color: #1C6EFB;

			&::placeholder {
				color: red;
			}
		}
	}

	.confirm-btn {
		position: fixed;
		bottom: 80rpx;
		left: 50%;
		transform: translateX(-50%);
		padding: 25rpx;
		background-color: #1C6EFB;
		color: #ffffff;
		border-radius: 50rpx;
		text-align: center;
		font-size: 30rpx;
		width: 80%;
		font-weight: 400;
	}
</style>